<!--
 * @Author: lomg
 * @Date: 2021-08-30 18:49:30
 * @LastEditTime: 2021-10-21 11:16:32
 * @LastEditors: Please set LastEditors
 * @Description: 应用报表日志
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\application-manage\application-log\applicationLog.vue
-->
<style lang="less" scoped>
.query_form {
  margin-top: 30px;
}
</style>
<template>
  <div class="app_container">
    <div class="box_style">
      <div class="table_tit_txt f_weight">报表日志</div>
      <div class="query_form">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="选择应用">
            <a-select placeholder="请选择应用" @change="appChange" :key="appDefaultName" :default-value="appDefaultName" allowClear>
              <a-select-option
                v-for="(appLis, index) of appList"
                :key="index"
                :value="appLis.id"
                >{{ appLis.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择接口">
            <a-cascader
              change-on-select
              :field-names="{ label: 'name', value: 'id', children: 'resourceList' }"
              :key="apiDefaultId"
              :default-value="[apiDefaultId]"
              :options="apiList"
              placeholder="请选择接口"
              @change="apiChange"
              :allowClear="false"
            />
          </a-form-model-item>
          <a-form-model-item label="调用结果">
            <a-checkbox-group
              :default-value="[form.results]"
              @change="checkSuccessChange"
            >
              <a-checkbox
                v-for="(checkSuccess, index) of checkSuccess"
                :key="index"
                :value="checkSuccess.mark"
                >{{ checkSuccess.name }}</a-checkbox
              >
            </a-checkbox-group>
          </a-form-model-item>
          
          <a-form-model-item>
           <span slot="label">
             时间段
            <a-tooltip title="最大时间段为一个月">
              <a-icon type="question-circle-o" />
            </a-tooltip>
          </span>
            <a-range-picker
              :default-value="[moment(defaultStartTime, dateFormat), moment(defaultEndTime, dateFormat)]"
              :ranges="getTimeSlot()"
              :disabled-date="disabledDate"
              :format="dateFormat"
              @change="onChangeDate"
              @calendarChange="calendarPriceRangeChange"
            />
          </a-form-model-item>
          
          <a-form-model-item label="单位：">
            <a-radio-group
              name="radioGroup"
              :default-value="form.unit"
              v-model="form.unit"
            >
              <a-radio
                v-for="(time, index) of timeSlot"
                :key="index"
                :value="time.id"
                >{{ time.name }}</a-radio
              >
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </div>
      <a-spin :spinning="chart_loading" tip="加载中...">
         <LogCharts :form="form" @chartLoadShow="chartLoadShow" @chartLoadHide="chartLoadHide" />
      </a-spin>
    </div>
  </div>
</template>
<script>
import LogCharts from "./components/LogCharts"
import { getApiServeList, getAppList, getTimeSlot } from '@/utils/business'
import { timeStremHandle } from "@/utils"
import moment from 'moment'
import { get_log_timeSlot, get_log_checkSuccess } from '@/utils/business'

const STARTDAY = timeStremHandle().latelyTimeStrem().startDay
const NOWDAY = timeStremHandle().latelyTimeStrem().nowDay

export default {
  components: {
    LogCharts,
  },
  data() {
    return {
      labelCol: { span: 1 },
      wrapperCol: { span: 5 },
      appList: [],
      appDefaultName: '',
      apiList: [],
      apiDefaultId: '',
      timeSlot: get_log_timeSlot,
      checkSuccess: get_log_checkSuccess,
      dateFormat: 'YYYY-MM-DD',
      defaultStartTime: STARTDAY,
      defaultEndTime: NOWDAY,
      chart_loading: true,

      form: {
        appId: '',
        resourceId: '',
        results: get_log_checkSuccess[0].mark ?? '',
        startDate: '2021-08-01' || STARTDAY,
        endDate: '2021-08-31' || NOWDAY,
        unit: "DAY"
      },

      selectPriceDate: '',
      offsetDays: 2678400 * 1000 //最多选择范围31天

    }
  },
  methods: {
    moment,
    getTimeSlot,
    appChange(id) {
      this.form.appId = id
    },
    apiChange(api) {
      this.form.resourceId = api.join()
    },
    checkSuccessChange(val) {
      this.form.results = val.join()
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    onChangeDate(date, dateString) {
      let start = Number(dateString[0].replaceAll('-',''))
      let end = Number(dateString[1].replaceAll('-',''))
      console.log(end - start)
      if((end - start) > 100) {
        this.$msg.warning('最大查询时间段为一个月')
        return false
        
      } else {
        (this.form.startDate = dateString[0]), (this.form.endDate = dateString[1])
      }
    },
    //  disabledDate(current) {
    //   return current && current < moment('2021-10-15').endOf('day')
    // },
    
//选择完时间
    changePriceRangeDate(value) {
      this.selectPriceDate = ''
    },
    
//选择开始时间/结束时间
    calendarPriceRangeChange(date){
      this.selectPriceDate = date[0]
    },
    
//根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate(current){
      // if(current && current < moment('2021-10-15').endOf('day')) {
      //   return true
      // }
      if(this.selectPriceDate){
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        return current > moment(this.formatDate(new Date(selectV+this.offsetDays).getTime(), 'Y-m-d')) ||
                current < moment(this.formatDate(new Date(selectV-this.offsetDays).getTime(), 'Y-m-d')) || 
                current > moment().endOf('day')
      }else{
        return current > moment().endOf('day')
      }
    },
    formatDate: (timestamp, formatLayout = 'Y-m-d H:i:s') => {
      let formatDate = ""
      formatLayout = formatLayout.toUpperCase()
      timestamp = (timestamp+"").length > 11 ? timestamp : timestamp * 1000
      let time = new Date(timestamp)
      for (let i in formatLayout) {
        if (['Y','M','D', 'W','H','I','S'].indexOf(formatLayout[i]) >= 0) {
          switch (formatLayout[i]) {
            case 'Y':
              formatDate += time.getFullYear()
              break;
            case 'M':
              formatDate += time.getMonth() >= 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
              break;
            case 'D':
              formatDate += time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
              break;
            case 'W':
              formatDate += time.getDay() == 0 ? 7 : time.getDay()
              break;
            case 'H':
              formatDate += time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
              break;
            case 'I':
              formatDate += time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
              break;
            case 'S':
              formatDate += time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
              break;
          }
        }else{
          formatDate += formatLayout[i]
        }
      }
 
      return formatDate
    },
    getAppList() {
       return getAppList().then((res) => {
         if(res.length !== 0) {
           this.appList = res
           this.form.appId = res[0].id
          return Promise.resolve(res[0].name)
         }
      })
    },
    getApiList() {
       return getApiServeList().then((res) => {
           if(res.length !== 0) {
             res.forEach((item, index) => { 
               if(index !== 0) {
               item.disabled = true
               }})
               
           this.apiList = res
           this.form.resourceId = res[0].id
           return Promise.resolve(res[0].id)
         }
      })
    },
    chartLoadHide() {
      this.chart_loading = false
    },
    chartLoadShow() {
      this.chart_loading = true
    },
  },
  created() {
    let appArr = this.getAppList(), apiArr = this.getApiList()
    
    Promise.all([appArr, apiArr]).then((res) => {
      this.appDefaultName = res[0], this.apiDefaultId = res[1]
    })
  },
}
</script>